<template>
  <div>
    <el-header>
      <Navbar />
    </el-header>
    <el-main>
      <h1>{{ restaurant.name }}</h1>
      <img :src="restaurant.image" alt="Restaurant Image" />
      <el-rate v-model="restaurant.rating" disabled></el-rate>
      <h2>菜品列表</h2>
      <el-row>
        <el-col v-for="dish in restaurant.dishes" :key="dish.id" :span="12">
          <el-card>
            <h3>{{ dish.name }}</h3>
            <p>价格: {{ dish.price }}元</p>
            <img :src="dish.image" alt="Dish Image" />
          </el-card>
        </el-col>
      </el-row>
      <h2>用户评价</h2>
      <el-list>
        <el-list-item v-for="review in restaurant.reviews" :key="review.id">
          <p>{{ review.comment }}</p>
        </el-list-item>
      </el-list>
    </el-main>
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue';

export default {
  components: { Navbar },
  data() {
    return {
      restaurant: {
        name: '餐厅A',
        image: 'imageA.jpg',
        rating: 4.5,
        dishes: [
          { id: 1, name: '菜品A', price: 30, image: 'dishA.jpg' },
          { id: 2, name: '菜品B', price: 25, image: 'dishB.jpg' },
        ],
        reviews: [
          { id: 1, comment: '味道很好，非常推荐！' },
          { id: 2, comment: '服务态度不错，环境也很好。' },
        ],
      },
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
}
</style>